<template>
  <div class="contact-container">
    <!-- 左侧列表 -->
    <div class="contact-list">
      <!-- 搜索框 -->
      <div class="search-bar">
        <el-input 
          v-model="searchText"
          placeholder="搜索联系人"
          prefix-icon="Search"
        />
      </div>

      <!-- 联系人列表 -->
      <div class="list-container">
        <div 
          v-for="contact in filteredContacts"
          :key="contact.id"
          class="contact-item"
          @click="openContactDetail(contact.id)"
        >
          <img :src="contact.avatar" class="avatar">
          <span class="name">{{ contact.name }}</span>
        </div>
      </div>
    </div>

    <!-- 右侧详情 -->
    <div class="detail-panel">
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <!-- 添加 keep-alive 保持组件状态 -->
          <keep-alive>
            <component :is="Component" :key="$route.params.userId" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模拟联系人数据
const contacts = ref([
  { id: 1, name: '张三', avatar: '/avatars/1.jpg' },
  { id: 2, name: '李四', avatar: '/avatars/2.jpg' },
  { id: 3, name: '王五', avatar: '/avatars/3.jpg' }
])

const searchText = ref('')

// 过滤后的联系人列表
const filteredContacts = computed(() => {
  return contacts.value.filter(contact => 
    contact.name.toLowerCase().includes(searchText.value.toLowerCase())
  )
})

// 打开联系人详情（关键修复）
const openContactDetail = (contactId) => {
  router.push({
    name: 'ContactDetail', // 确保与路由配置的name一致
    params: { userId: contactId }
  })
}
</script>

<style scoped>
.contact-container {
  display: flex;
  height: calc(100vh - 60px); /* 根据实际布局调整高度 */
  background: #fff;
}

.contact-list {
  width: 300px;
  border-right: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
}

.detail-panel {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
  padding: 20px;
  background: #f8f8f8;
}

.search-bar {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.list-container {
  flex: 1;
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s;

  &:hover {
    background: #f5f5f5;
  }
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 15px;
}

.name {
  font-size: 16px;
  color: #333;
}
</style>